<template>
    <fieldset>
        <legend>setup语法糖</legend>
        <h1>setup语法糖</h1>
        <!-- <h1>props的值:{{ s }}</h1>
        <child @res="handleRes"></child> -->
        <otherApi :r="m"></otherApi>
    </fieldset>
</template>
<script setup>
import otherApi from "./08.其它响应式api.vue"
// import {defineProps} from "vue"
import {toRefs, ref} from "vue"
//不需要export default
import child from "./05.child.vue"
//在最外层可以不需要使用async 直接使用await语法

//不要在组合式的setup中使用this去访问当前组件实例成员

// let p = await Promise.resolve(3);

// console.log(p)

// console.log(this) undefined

// --------------定义props----------------

//常规写法

// let props = defineProps(['m'])

//属性props验证的写法
let props2 = defineProps({
    s: {
        type: String,
        required: true
    }
})

//------------------解构props-----------------

//这种解构方式会让视图层失去响应
// let { s } = props2

//使用toRefs让props解构之后也能保持视图响应

let {s} = toRefs(props2)

// console.log(props)
// console.log(props2)


//-----------------定义emits----------------

//组合式中 如何定义methods? 答案是不需要,直接声明函数就行了

let handleRes = input => {
    console.log(input)
}

let m = ref('默认props')
</script>
